<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-text|v-html|v-cloak</title>
		<style>
			[v-cloak]{
				display:none;
			}
		</style>
	</head>
	<body>
		
		<div id="root">
			<!-- 使用 v-text展示值 -->
			<div v-text="name"></div>
			<!-- 使用v-html展示值,会解析html标签,但需注意xss安全问题 -->
			<p v-html="name"></p>
			<!-- v-cloak指令(没有值):
				1、本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。
				2、使用css配合v-cloak可以解决网速慢时页面展示出{{XXX}}的问题。
			-->
			<div v-cloak>{{name}}</div>
		</div>
		<!-- 当src的值改为网络地址时,可能存在加载较慢的情况,此时div中的内容可以使用v-cloak配合css暂时不显示 -->
		<script src="./js/vue.js"></script>
		<script>
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#root',
				data:{
					name:'<h3>杭州</h3>'
				}
			});
		</script>
	</body>
</html>